<template>
	<view class="container">
		<scroll-view scroll-y class="scroll-container">
			<view class="header">
				<text class="header-title">考试题目</text>
				<text class="progress">已完成 {{ Object.keys(answers).length }}/{{ questionList.length }}</text>
			</view>

			<view v-for="(question, index) in questionList" :key="question.id" class="question-card">
				<view class="question-header">
					<text class="question-number">Q{{ index + 1 }}</text>
					<text class="question-title">{{ question.title }}</text>
				</view>

				<view class="options-container">
					<view v-for="option in question.options" :key="option.id" class="option-item"
						:class="{ 'option-selected': answers[question.id] === option.id }"
						@click="selectOption(question.id, option.id)">
						<view class="option-selector">
							<view class="option-dot" v-if="answers[question.id] === option.id"></view>
						</view>
						<text class="option-text">{{ option.option }}</text>
					</view>
				</view>
			</view>

			<view class="submit-container">
				<button class="submit-btn" :class="{ 'disabled-btn': Object.keys(answers).length < questionList.length }" 
					@click="handleSubmit">提交答案</button>
			</view>
		</scroll-view>

		<!-- 结果弹窗 -->
		<view class="result-modal" v-if="showResultModal">
			<view class="modal-mask" @click="closeModal"></view>
			<view class="modal-content" :class="{ 'pass-modal': isPassed === '通过', 'fail-modal': isPassed === '未通过' }">
				<view class="modal-header">
					<text class="modal-title">{{ resultTitle }}</text>
				</view>
				<view class="modal-body">
					<image :src="resultImage" class="result-image"></image>
					<text class="result-message">{{ resultMessage }}</text>
				</view>
				<view class="modal-footer">
					<button class="modal-btn back-btn" @click="goBack">返回</button>
					<button class="modal-btn retry-btn" @click="retryExam">重试</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getExamList,
		saveExam
	} from "../../utils/getDate.js"
	export default {
		data() {
			return {
				projectId: "",
				teacherId: "",
				questionList: [],
				answers: {},
				showResultModal: false, // 控制弹窗显示
				resultTitle: "", // 结果标题
				resultMessage: "", // 结果信息
				resultImage: "", // 结果图片
				isPassed: false // 是否通过
			}
		},
		onLoad(options) {
			this.projectId = options.projectId;
			this.teacherId = options.teacherId;
			this.ongetExamList()
		},
		methods: {
			ongetExamList() {
				return new Promise((resolve, reject) => {
					let data = {
						projectId: this.projectId
					};
					getExamList(data).then(res => {
						if (res.state === 'ok') {
							this.questionList = res.data;
							resolve(res.data);
						} else {
							reject(res);
						}
					}).catch(err => {
						reject(err);
					});
				});
			},

			selectOption(questionId, optionId) {
				this.$set(this.answers, questionId, optionId);
			},

			handleSubmit() {
				// 检查是否所有题目都已作答
				const unanswered = this.questionList.filter(q => !this.answers[q.id]);
				if (unanswered.length > 0) {
					uni.showToast({
						title: `还有${unanswered.length}题未作答`,
						icon: 'none',
						duration: 2000
					});
					return;
				}

				const submitData = {
					project_id: Number(this.projectId),
					teacher_id: uni.getStorageSync("teacher").id,
					options: []
				};

				this.questionList.forEach(question => {
					const selectedOptionId = this.answers[question.id];
					const selectedOption = question.options.find(opt => opt.id === selectedOptionId);

					// 调试信息
					console.log('Question ID:', question.id);
					console.log('Selected Option ID:', selectedOptionId);
					console.log('Options:', question.options);

					if (!selectedOption) {
						console.error(`无法找到题目 ${question.id} 的选项 ${selectedOptionId}`);
						return; // 跳过这道题
					}

					submitData.options.push({
						score: selectedOption.score,
						question_id: question.id,
						option: selectedOption.option
					});
				});

				// 如果没有有效选项，不提交
				if (submitData.options.length === 0) {
					uni.showToast({
						title: '提交失败，请重新选择答案',
						icon: 'none',
						duration: 2000
					});
					return;
				}

				saveExam(submitData).then(res => {
					this.isPassed = res.result;
					if (this.isPassed == "通过") {
						this.resultTitle = "恭喜通过！";
						this.resultMessage = "您已成功通过本次考试，获得认证资格。";
						this.resultImage = "https://lesson.iapeap.com/images/%E7%AC%91%E8%84%B8%E6%BB%A1%E6%84%8F%E8%AF%84%E4%BB%B7.png";
					}
					if (this.isPassed == "未通过") {
						this.resultTitle = "未通过考试";
						this.resultMessage = `您的得分为${res.score}分，未达到合格标准，请继续努力。`;
						this.resultImage = "https://lesson.iapeap.com/images/%E5%93%AD%E8%84%B8.png";
					}
					this.showResultModal = true;
				})
			},

			// 关闭弹窗
			closeModal() {
				this.showResultModal = false;
			},

			// 返回上一页
			goBack() {
				uni.navigateBack();
			},

			// 再次答题
			retryExam() {
				this.ongetExamList()
				// 清空已选答案
				this.answers = {};
				// 关闭弹窗
				this.showResultModal = false;
				// 滚动到顶部
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background-color: #f8fafc;
		position: relative;
		font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
	}

	.scroll-container {
		flex: 1;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
	}

	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
		padding: 20rpx 0;
	}

	.header-title {
		font-size: 40rpx;
		font-weight: 600;
		color: #1e293b;
	}

	.progress {
		font-size: 28rpx;
		color: #64748b;
		background: #e2e8f0;
		padding: 8rpx 20rpx;
		border-radius: 20rpx;
	}

	.question-card {
		background: #ffffff;
		border-radius: 24rpx;
		padding: 32rpx;
		box-sizing: border-box;
		margin-bottom: 32rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.04);
		border: 1rpx solid #f1f5f9;
		transition: transform 0.2s ease, box-shadow 0.2s ease;
	}

	.question-card:active {
		transform: translateY(2rpx);
		box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.04);
	}

	.question-header {
		display: flex;
		align-items: flex-start;
		margin-bottom: 32rpx;
	}

	.question-number {
		width: 60rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		background: linear-gradient(135deg, #6366f1, #8b5cf6);
		color: white;
		border-radius: 12rpx;
		font-size: 28rpx;
		font-weight: bold;
		margin-right: 24rpx;
		flex-shrink: 0;
	}

	.question-title {
		flex: 1;
		font-size: 32rpx;
		font-weight: 500;
		color: #1e293b;
		line-height: 1.5;
	}

	.options-container {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.option-item {
		display: flex;
		align-items: center;
		padding: 24rpx;
		box-sizing: border-box;
		border-radius: 16rpx;
		background: #f8fafc;
		border: 2rpx solid #e2e8f0;
		transition: all 0.2s ease;
	}

	.option-item:active {
		transform: scale(0.98);
	}

	.option-selected {
		border-color: #6366f1;
		background: rgba(99, 102, 241, 0.08);
		box-shadow: 0 0 0 2rpx rgba(99, 102, 241, 0.2);
	}

	.option-selector {
		width: 40rpx;
		height: 40rpx;
		border: 2rpx solid #cbd5e1;
		border-radius: 50%;
		margin-right: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all 0.2s;
		flex-shrink: 0;
	}

	.option-selected .option-selector {
		border-color: #6366f1;
		background: #6366f1;
	}

	.option-dot {
		width: 20rpx;
		height: 20rpx;
		background: white;
		border-radius: 50%;
	}

	.option-text {
		font-size: 30rpx;
		color: #334155;
		line-height: 1.4;
	}

	.option-selected .option-text {
		color: #6366f1;
		font-weight: 500;
	}

	.submit-container {
		padding: 40rpx 0 60rpx;
		box-sizing: border-box;
	}

	.submit-btn {
		background: linear-gradient(135deg, #6366f1, #8b5cf6);
		color: white;
		border-radius: 16rpx;
		font-size: 32rpx;
		height: 96rpx;
		line-height: 96rpx;
		box-shadow: 0 8rpx 24rpx rgba(99, 102, 241, 0.3);
		transition: all 0.2s;
		border: none;
	}

	.submit-btn:active {
		transform: translateY(2rpx);
		box-shadow: 0 4rpx 12rpx rgba(99, 102, 241, 0.3);
	}

	.disabled-btn {
		background: #cbd5e1 !important;
		box-shadow: none !important;
		opacity: 0.7;
	}

	/* 结果弹窗样式 */
	.result-modal {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 1000;
	}

	.modal-mask {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		backdrop-filter: blur(10rpx);
	}

	.modal-content {
		position: relative;
		width: 80%;
		max-width: 600rpx;
		background-color: white;
		border-radius: 24rpx;
		overflow: hidden;
		box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.2);
		animation: popup 0.3s ease-out;
	}

	.pass-modal {
		border-top: 8rpx solid #10b981;
	}

	.fail-modal {
		border-top: 8rpx solid #ef4444;
	}

	@keyframes popup {
		0% {
			transform: scale(0.9);
			opacity: 0;
		}
		100% {
			transform: scale(1);
			opacity: 1;
		}
	}

	.modal-header {
		padding: 40rpx 30rpx 20rpx;
		text-align: center;
	}

	.modal-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #1e293b;
	}

	.modal-body {
		padding: 20rpx 40rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.result-image {
		width: 180rpx;
		height: 180rpx;
		margin-bottom: 30rpx;
	}

	.result-message {
		font-size: 30rpx;
		color: #64748b;
		text-align: center;
		line-height: 1.6;
		margin-bottom: 20rpx;
	}

	.modal-footer {
		display: flex;
		padding: 20rpx 30rpx 40rpx;
		gap: 20rpx;
	}

	.modal-btn {
		flex: 1;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 12rpx;
		font-size: 30rpx;
		font-weight: 500;
		transition: all 0.2s;
		border: none;
	}

	.back-btn {
		background-color: #f1f5f9;
		color: #64748b;
	}

	.back-btn:active {
		background-color: #e2e8f0;
		transform: translateY(2rpx);
	}

	.retry-btn {
		background: linear-gradient(135deg, #6366f1, #8b5cf6);
		color: white;
		box-shadow: 0 4rpx 12rpx rgba(99, 102, 241, 0.3);
	}

	.retry-btn:active {
		transform: translateY(2rpx);
		box-shadow: 0 2rpx 6rpx rgba(99, 102, 241, 0.3);
	}
</style>